<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { ref, computed } from "@vue/runtime-core"
import { useStoriesStore } from '@/store'
import { useRouter } from "vue-router";


const store = useStoriesStore()
const { addOrder, cartList, minusNum, addNums, deleteGoods, goOrder } = store


const router = useRouter()
const deletes = ref(true)


const checkAll = computed({
    get() {
        return cartList.every((item: { finish: boolean }) => item.finish)
    },

    set(value: boolean) {
        cartList.forEach((item: { finish: boolean }) => {
            item.finish = value
        })
    }
})

// const keepTwoDecimalFull = (num: any) => {
//     let result = parseFloat(num);
//     if (isNaN(result)) {
//         return false;

//     }
//     result = Math.round(num * 100) / 100;
//     let s_x = result.toString(); //将数字转换为字符串

//     let pos_decimal = s_x.indexOf('.'); //小数点的索引值


//     // 当整数时，pos_decimal=-1 自动补0  
//     if (pos_decimal < 0) {
//         pos_decimal = s_x.length;
//         s_x += '.';

//     }

//     // 当数字的长度< 小数点索引+2时，补0  
//     while (s_x.length <= pos_decimal + 2) {
//         s_x += '0';

//     }
//     return s_x;

// }


// })

// const numFilter = (value:any) => {
//     // 截取当前数据到小数点后三位
//     cartList.filter(i => {
//         if (!i.finish) {
//             let tempVal = parseFloat(value).toFixed(3)
//             let realVal = tempVal.substring(0, tempVal.length - 1)
//             return realVal
//         }
//     })

// }

// const getAllPrice = computed(() => {
//     let price = 0;
//     cartList.forEach(o => {
//         if (o.finish === true) {
//             // this.all.map((o)=>o.jiage*o.nums)
//             const nval = (price += parseFloat(o.jiage) * o.num).toFixed(3)
//             const val = nval.substring(0, nval.lastIndexOf('.') + 3)
//             return val
//         }
//     });
//     return price;
// })


const sumPrice = computed(() => {
    return cartList.filter((item: { finish: boolean; }) => item.finish).reduce((pre: any, cur: { jiage: any; num: number; }) => {
        let val = pre += (cur.jiage * cur.num)
        return Math.floor(val * 100) / 100
    }, 0)
})




// eslint-disable-next-line @typescript-eslint/no-unused-vars
const buy = () => {
    router.push({ path: '/payment' })
}
</script>

<template>
    <div class="cart-box">
        <div class="top-bar">
            <div class="left" style="margin-left: 10px;" @click="$router.go(-1)">
                <van-icon name="arrow-left" />
            </div>
            <div class="gwc">购物车</div>
            <div class="bj" style="margin-right: 10px;" v-if="deletes" @click="deletes = !deletes">编辑</div>
            <div class="bj" style="margin-right: 10px;" v-else @click="deletes = !deletes">完成</div>
        </div>
        <div class="none" v-if="cartList.length == 0">
            <div class="title">
                你的购物车空空如也
            </div>
            <div class="btn" @click="$router.push({ path: '/' })">去逛逛</div>
        </div>
        <div class="goods-box" v-if="cartList.length != 0">
            <ul class="goods-list">
                <li class="list" v-for="(c, i) in cartList" :key="i">
                    <!-- <div class="shop-box">
                        <span class="shop-name">{{ s.shopName }}</span>
                    </div> -->
                    <div class="show-goods">

                        <div class="goods">
                            <div class="ipt">
                                <input type="checkbox" v-model="c.finish" class="tui-checkbox">
                            </div>
                            <div class="box">
                                <div class="left-img">
                                    <img :src="c.img">
                                </div>
                                <div class="right">
                                    <div class="title">{{ c.title }}</div>
                                    <div class="style">颜色:{{ c.seletedcolor }} 尺码:{{ c.chima }}</div>
                                    <div class="price-box">
                                        <div class="price">¥{{ c.jiage }}</div>
                                        <div class="num-box">
                                            <div class="minus"
                                                @click="c.num === 1 ? minusNum(c.id, 1) : minusNum(c.id, c.num--)">
                                                - </div>
                                            <div class="nums">{{ c.num }}</div>
                                            <div class="add" @click.stop="addNums(c.id, c.num++)"> +
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="foot">
                                <div class="all">
                                    <input type="checkbox" v-model="checkAll" class="tui-checkbox">
                                    <div class="quanxuan">全选</div>
                                </div>
                                <div class="right-box">
                                    <div class="all-price" v-if="deletes">合计: <span
                                            style="color: #f46; font-weight: bold;">¥{{ sumPrice }}</span>
                                    </div>
                                    <div class="btn" v-if="deletes" @click="addOrder(
                                        c.img,
                                        c.chima,
                                        c.jiage,
                                        c.title,
                                        c.seletedcolor,
                                        c.shopName,
                                        c.num
                                    ), goOrder()">结算</div>
                                    <div class="btn" v-else @click="deleteGoods">删除</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    margin-bottom: 15px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;

}

.goods-card {
    margin: 0;
}

.delete-button {
    height: 100%;
}

.none {
    padding-top: 160px;
    text-align: center;

    .btn {
        width: 80px;
        height: 30px;
        line-height: 30px;
        background-color: #f46;
        color: #fff;
        text-align: center;
        margin: 0 auto;
        margin-top: 20px;
    }
}

//设置选中背景
.tui-checkbox:checked {
    background: #f46
}

//设置复选框样式
.tui-checkbox {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: solid 1px #dddddd;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
    margin-right: 5px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background-color ease 0.1s;
    transition: background-color ease 0.1s;
}

//设置伪类，即显现的对勾样式
.tui-checkbox:checked::after {
    content: '';
    top: 3px;
    left: 3px;
    position: absolute;
    background: transparent;
    border: #fff solid 2px;
    border-top: none;
    border-right: none;
    height: 6px;
    width: 10px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}



.shop-name {
    font-size: 18px;
    font-weight: bold;
}

.goods-box {
    padding-top: 60px;
    background: #cccccc38;
    padding-bottom: 1px;
}

.goods {
    display: flex;
    align-items: center;
    margin-top: 15px;

    .box {
        display: flex;

        .left-img {
            flex: 0 0 70px;
            height: 92px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 5px;


            .title {
                font-size: 13px;
                font-weight: 700;
            }

            .style {
                color: #666;
                font-size: 12px;
            }

            .price-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 3px;

                .price {
                    color: #f46;
                    font-weight: bold;
                }

                .num-box {
                    display: flex;
                    width: 80px;
                    height: 22px;
                    line-height: 22px;
                    background: #cccccc38;
                    border-radius: 999px;
                    flex-direction: row;
                    justify-content: space-between;

                    .minus,
                    .add {
                        width: 20px;
                        height: 21px;
                        border-radius: 999px;
                        background: #fff;
                        text-align: center;
                    }
                }
            }
        }
    }
}

:deep(.el-message-box) {
    display: inline-block;
    width: 75vw;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    font-size: 18px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    text-align: left;
    overflow: hidden;
    backface-visibility: hidden;
}

.list {
    width: 94vw;
    background: #fff;
    margin: 0 auto;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.foot {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 45px;
    background: #fff;


    .all {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .right-box {
        display: flex;
        align-items: center;

        .btn {
            width: 75px;
            height: 37px;
            line-height: 37px;
            background: #f46;
            color: #fff;
            text-align: center;
        }
    }
}



.action {
    height: 100%;
    display: flex;
}

.button {
    display: block;
    margin: 0;
    padding: 0 11px;
    height: 100%;
    color: white;
    border: none;
    outline: none;
    // -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}
</style>